<!-- 文字容器，使用此组件必须赋予高度 -->

<template>
  <svg ref="dsvg" class="kk-text" :style="`${Style.join('')}width:${Width}vw;`">
    <text ref="tsvg" x="50%" y="85%" text-anchor="middle" :style="`font-size:${Size}vw`">
      <a v-if="val">{{val}}</a>
      <slot v-if="!val" />
    </text>
  </svg>
</template>

<script>
export default {
  // 组件名称
  name: "kk-text",

  // 接收参数
  props: {
    val: null // 动态值（使用时会屏蔽插槽）
  },

  // 页面对象
  data: () => ({
    Width: null, // 宽度
    Size: null, // 字号
    Style: [
      "box-sizing:border-box;",
      "display:inline-block;",
      "position:relative;",
      "overflow:visible;",
      "font-size:0vw;"
    ]
  }),

  // 动态监听
  watch: {
    val() {
      this.$nextTick(() => this.SetSize()); // 内容渲染完成后执行
    }
  },

  // 生命周期函数：挂载后调用
  mounted() {
    this.SetSize();
  },

  // 页面方法
  methods: {
    // 设置尺寸
    SetSize() {
      const // 创建对象
        W = document.body.clientWidth, // 获取窗口长度
        H = this.$refs.dsvg.getBoundingClientRect().height; // 抽取组件高度
      this.Size = (H / W) * 100; // 赋值字号

      // 内容渲染完成后
      this.$nextTick(() => {
        const X = this.$refs.tsvg.getBoundingClientRect().width / W; // 计算内容宽度
        this.Width = X * 100; // 赋值宽度
      });
    }
  }
};
</script>

<style scoped>
.kk-text {
  transition: fill 0.2s cubic-bezier(0, 0, 0.5, 1);
  fill: rgb(48, 49, 51);
  height: 0.7vw;
}
</style>